<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('进出车辆登记')" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-identify-edit" th:object="${identifyInfo}">
			<div class="form-group">
				<label class="col-sm-3 control-label">司机姓名：</label>
				<div class="col-sm-8" style="width: 50%">
					<input class="form-control" type="text" name="drivername" id="drivername" placeholder="请输入登记姓名" required>
					<span id="spa1"></span>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">联系方式：</label>
				<div class="col-sm-8" style="width: 50%">
					<input class="form-control" type="text" name="phonenum" id="phonenum" placeholder="请输入联系方式" required>
					<span id="spa2"></span>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label ">车牌号码：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" readonly="readonly" name="license" id="license" th:field="*{license}" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">车辆类型：</label>
				<div class="col-sm-8">
					<select name="cartype" id="cartype" th:with="type=${@dict.getType('car_type')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
					&emsp;-种类:&emsp;<select name="carsize" id="carsize" ><option value="">请选择</option></select>
					<span id="spa4"></span>
				</div>
			</div>
			<input id="inid" name="inid"  type="hidden" th:field="*{id}" />
			<div class="form-group">
				<label class="col-sm-3 control-label">进口来访：</label>
				<div class="col-sm-8">
					<select name="destbation" id="destbation" th:with="type=${@dict.getType('pass_destbation')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
					&emsp;-城市:&emsp;<select name="city" id="city" ><option value="">请选择</option></select>
					<span id="spa3"></span>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<script type="text/javascript">
		function clearspan(){
		    $("#spa1").html("");
            $("#spa2").html("");
            $("#spa3").html("");
            $("#spa4").html("");
		}
        $(function () {
            $.post(prefix+"/city",{"destId":1},function (data) {
                for (var i = 0 ;i<data.length;i++){
                    var city = data[i];
                    $("#city").append("<option value='"+city.cityid+"'>"+city.cityname+"</option>")
                }
            },"json");
            $.post(prefix+"/type",{"belongid":1},function (data) {
                for (var i = 0 ;i<data.length;i++){
                    var type = data[i];
                    $("#carsize").append("<option value='"+type.typeid+"'>"+type.typename+"</option>")
                }
            },"json")
		});
		var prefix = ctx + "system/identify";


		function submitHandler() {
		    var regBox ={
                regMobile : /^0?1[3|4|5|8][0-9]\d{8}$/
			}
            if($("#drivername").val()==null || $("#drivername").val()==""){
		        clearspan();
		        $("#spa1").html("请输入姓名");
		        $("#spa1").css("color","red");
			}else if($("#phonenum").valid()==null||$("#phonenum").val()==""||!regBox.regMobile.test($("#phonenum").val())) {
                clearspan();
                $("#spa2").html("电话号码为空或输入有误");
                $("#spa2").css("color","red");
			}else if($("#carsize").val()==""){
                clearspan();
                $("#spa4").html("请选择车辆种类");
                $("#spa4").css("color","red");
            }else if($("#city").val()==""){
                clearspan();
                $("#spa3").html("请选择城市");
                $("#spa3").css("color","red");
			}else {
		        var formData = {"drivername":$("#drivername").val(),"phonenum":$("#phonenum").val(),"license":$("#license").val(),"cartype":$("#cartype").val(),"carsize":$("#carsize").val(),"inid":$("#inid").val(),"destbation":$("#destbation").val(),"city":$("#city").val()};
		        console.log(formData);
                $.operate.save(prefix + "/edit",formData);
			}
	    }


        $("#destbation").change(function a() {
            var destId = $("#destbation").val();
            $("#city option:gt(0)").remove();
            if (destId!=""){
                $.post(prefix+"/city",{"destId":destId},function (data) {
                    for (var i = 0 ;i<data.length;i++){
                        var city = data[i];
                        $("#city").append("<option value='"+city.cityid+"'>"+city.cityname+"</option>")
                    }
                },"json")
            }
        })

        $("#cartype").change(function a() {
            var belongid = $("#cartype").val();
            $("#carsize option:gt(0)").remove();
            if (belongid!=""){
                $.post(prefix+"/type",{"belongid":belongid},function (data) {
                    for (var i = 0 ;i<data.length;i++){
                        var type = data[i];
                        $("#carsize").append("<option value='"+type.typeid+"'>"+type.typename+"</option>")
                    }
                },"json")
            }
        })
	</script>
</body>
</html>
